<template>
  <div class="box">
    <!-- 焦点数据 -->
    <div>
      <div class="header_shuju">
        <div>焦点数据</div>
        <div>实时统计嘟一下数据</div>

        <div style="cursor: pointer" @click="handleButton">
          <!-- <el-button type="primary" size="mini" @click="handleButton"
            >教程指导</el-button
          > -->
          <img
            src="~@/assets/courseImg/zhiyin.png"
            alt=""
            srcset=""
            style="width: 33%"
          />
          <span style="color: rgb(2, 250, 254)">教程指导</span>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="bgImg">
      <el-dialog
        width="100%"
        :visible.sync="courseImgShow"
        top="0"
        style="z-index: 1000"
      >
        <div class="courseImg couseDiv">
          <div @click="choiceOne" class=""></div>
          <div @click="choiceTow"></div>
        </div>
      </el-dialog>
    </div>
    <!-- 推送引导 -->
    <div class="guide_img">
      <el-dialog
        width="100%"
        :visible.sync="courseGuideShow"
        ref="elDialog"
        top="0px"
      >
        <el-carousel
          trigger="click"
          @click.native="linkTo"
          height="90vh"
          ref="carouselGuide"
        >
          <el-carousel-item
            class="lun_img"
            v-for="item in imgsGuide"
            v-bind:key="item.url"
          >
            <img :src="item.url" class="img_items" />
          </el-carousel-item>
        </el-carousel>
      </el-dialog>
    </div>
    <!-- 群组配置 -->
    <div class="guide_img">
      <el-dialog
        width="100%"
        :visible.sync="courseGroupShow"
        ref="elDialog"
        top="0px"
      >
        <el-carousel
          trigger="click"
          @click.native="linkToGroup"
          height="90vh"
          ref="carouselGroup"
        >
          <el-carousel-item
            class="lun_img"
            v-for="item in imgsGroup"
            v-bind:key="item.url"
          >
            <img :src="item.url" class="img_items" />
          </el-carousel-item>
        </el-carousel>
      </el-dialog>
    </div>
    <!-- 累计字段 -->
    <div class="umulativefield">
      <div class="umulativefield_box">
        <div class="umulativefield_num">
          <div>
            <div>累计活动策划数</div>
            <span>{{ planNum | num }}</span>
            <!-- <span>项</span> -->
          </div>
          <div>
            <img src="~@/assets/img/data.png" alt="" />
          </div>
        </div>
      </div>
      <div class="umulativefield_box">
        <div class="umulativefield_num">
          <div>
            <div>累计嘟一下人次</div>
            <span>{{ byModeType.累计嘟一下人次 | num }}</span>
            <!-- <span>项</span> -->
          </div>
          <div>
            <img src="~@/assets/img/number_num.png" alt="" />
          </div>
        </div>
      </div>
      <div class="umulativefield_box">
        <div class="umulativefield_num">
          <div>
            <div>累计外呼人次</div>
            <span>{{ byModeType.累计外呼人次 | num }}</span>
            <!-- <span>项</span> -->
          </div>
          <div>
            <img src="~@/assets/img/waihu.png" alt="" />
          </div>
        </div>
      </div>
      <div class="umulativefield_box">
        <div class="umulativefield_num">
          <div>
            <div>累计短信人次</div>
            <span>{{ byModeType.累计短信人次 | num }}</span>
            <!-- <span>项</span> -->
          </div>
          <div>
            <img src="~@/assets/img/waihu.png" alt="" />
          </div>
        </div>
      </div>
      <div class="umulativefield_box">
        <div class="umulativefield_num">
          <div>
            <div>累计响应人次</div>
            <span>{{ byModeType.累计相应人次 | num }}</span>
            <!-- <span>项</span> -->
          </div>
          <div>
            <img src="~@/assets/img/number_one.png" alt="" />
          </div>
        </div>
      </div>
      <div class="umulativefield_box">
        <div class="umulativefield_num">
          <div>
            <div>三方接口调用次数</div>
            <span>{{ byModeType.三分接口调用次数 | num }}</span>
            <!-- <span>项</span> -->
          </div>
          <div>
            <img src="~@/assets/img/leiji_num.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 中间部分echarts -->
    <div class="content_echarts">
      <div class="content_search">
        <div id="fraud_line"></div>
        <div class="seach_time">
          <el-date-picker
            v-model="outbountTime"
            :default-value="timeDefaultShow"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="chioceTime"
          >
          </el-date-picker>
        </div>
      </div>
      <div id="fraud_pieBox">
        <el-carousel trigger="click" height="344px">
          <el-carousel-item height="344px">
            <!-- <div id="fraud_one"></div> -->
            <div id="fraud_one">
              <div class="title">
                <h3>业务场景推送预览</h3>
              </div>
              <div class="seach_timeTow">
                <el-date-picker
                  v-model="businessSceneTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  @change="chioceSceneTime"
                >
                </el-date-picker>
              </div>
              <div class="left">
                <div class="act_chart act_chart_one">
                  <!-- <div id="fraudScene_bar"></div> -->
                  <div
                    class="chart_con"
                    v-for="(item, index) in scenePush"
                    :key="index"
                    @click="choiceImg(item.activeName)"
                  >
                    <div class="act_name_sort">
                      {{ item.activeName }}
                    </div>
                    <div
                      :style="{
                        width: index < 8 ? getWidth(item.count) : ''
                      }"
                      class="act_val act_width"
                      
                    >
                      <div class="act_num" >
                        {{ item.count }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div class="choice_btn">
                <div>
                  <el-button
                    type="primary"
                    @click="choiceImg(1)"
                    class="buttonClass"
                    >自定义文本推送</el-button
                  >
                </div>
                <div>
                  <el-button
                    type="button_tow"
                    @click="choiceImg(2)"
                    class="buttonClass"
                    >销售组织打卡</el-button
                  >
                </div>
                <div>
                  <el-button
                    type="button_there"
                    @click="choiceImg(3)"
                    class="buttonClass"
                    >异动预警</el-button
                  >
                </div>
                <div>
                  <el-button
                    type="button_four"
                    @click="choiceImg(4)"
                    class="buttonClass"
                    >规则知识送达</el-button
                  >
                </div>
                <div>
                  <el-button
                    type="button_five"
                    @click="choiceImg(5)"
                    class="buttonClass"
                    >5G领导视窗</el-button
                  >
                </div>
                <div>
                  <el-button
                    type="button_six"
                    @click="choiceImg(6)"
                    class="buttonClass"
                    >宽表小贴士</el-button
                  >
                </div>
                <div>
                  <el-button
                    type="button_seven"
                    @click="choiceImg(7)"
                    class="buttonClass"
                    >标签小贴士</el-button
                  >
                </div>
              </div> -->
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div id="fraud_pie"></div>
          </el-carousel-item>
          <el-carousel-item trigger="click" height="344px">
            <div id="fraud_pieTow"></div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 业务场景推送预览 -弹框-->
      <el-dialog
        title="业务场景推送预览"
        :visible.sync="dialogChoiceImg"
        width="55%"
      >
      <div style="margin: auto;width: 50rem; margin-bottom: 10px;">
        <span >{{title}}</span>
      </div>
        <div style="text-align: center">
          <img :src="imgUrl" alt="" @click="handleImg(imgUrl)" />
        </div>
      </el-dialog>
      <el-dialog
        :visible.sync="dialogChoiceImgTow"
        width="75%"
      >
        <div style="text-align: center">
          <img :src="imgUrl" alt="" width="100%"/>
        </div>
      </el-dialog>
    </div>
    <!-- 底部echarts -->
    <div class="buttom_echarts" id="fraud_bar"></div>
    <!-- <el-carousel trigger="click" @click.native="linkTo">
      <el-carousel-item class="lun_img" v-for="item in imgs" v-bind:key="item.url" >
             <img :src="item.url"/>
           </el-carousel-item>
    </el-carousel> -->
    <!-- <img
      src="../../assets/img/bg-new.png"
      alt=""
      id="bg"
      style="width: 100%"
      class=""
    /> -->
    <!-- <div>
      <div class="box_content">
        <div class="box_kuang" v-for="(item, index) in dayList" :key="index">
          <div v-for="(item2, index) in monthList" :key="index">
            <div class="kuang_title">发送规模</div>
            <div class="kuang_data">
              <div class="kuang_content kuang_contentLine">
                <div>{{ item.pushCount === null ? 0 : item.pushCount }}</div>
                <span>{{ item.time }}</span>
              </div>
              <div class="kuang_content kuang_contentLine">
                <div>{{ item2.pushCount === null ? 0 : item2.pushCount }}</div>
                <span>{{ item2.time }}</span>
              </div>
              <div class="kuang_content">
                <div>
                  {{ data.returnData.pushSumCountAll }}
                </div>
                <span>累计</span>
              </div>
            </div>
          </div>
        </div>
        <div
          class="box_kuang"
          v-for="(item, index) in dayList"
          :key="'i1' + index"
        >
          <div v-for="(item2, index) in monthList" :key="'j1' + index">
            <div class="kuang_title">响应规模</div>
            <div class="kuang_data">
              <div class="kuang_content kuang_contentLine">
                <div>{{ item.readCount === null ? 0 : item.readCount }}</div>
                <span>{{ item.time }}</span>
              </div>
              <div class="kuang_content kuang_contentLine">
                <div>{{ item2.readCount === null ? 0 : item2.readCount }}</div>
                <span>{{ item2.time }}</span>
              </div>
              <div class="kuang_content">
                <div>
                  {{ data.returnData.pushUpgradeSumCountAll }}
                </div>
                <span>累计</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box_content box_contentTow">
        <div
          class="box_kuang"
          v-for="(item, index) in dayList"
          :key="'i2' + index"
        >
          <div v-for="(item2, index) in monthList" :key="'j2' + index">
            <div class="kuang_title">短信升级规模</div>
            <div class="kuang_data">
              <div class="kuang_content kuang_contentLine">
                <div>
                  {{ item.shortCount == null ? 0 : item.shortCount }}
                </div>
                <span>{{ item.time }}</span>
              </div>
              <div class="kuang_content kuang_contentLine">
                <div>
                  {{ item2.shortCount == null ? 0 : item2.shortCount }}
                </div>

                <span>{{ item2.time }}</span>
              </div>
              <div class="kuang_content">
                <div>
                  {{ data.returnData.shortCountAll }}
                </div>
                <span>累计</span>
              </div>
            </div>
          </div>
        </div>
        <div
          class="box_kuang"
          v-for="(item, index) in dayList"
          :key="'i3' + index"
        >
          <div v-for="(item2, index) in monthList" :key="'j3' + index">
            <div class="kuang_title">电话升级规模</div>
            <div class="kuang_data">
              <div class="kuang_content kuang_contentLine">
                <div>{{ item.telCount == null ? 0 : item.telCount }}</div>
                <span>{{ item.time }}</span>
              </div>
              <div class="kuang_content kuang_contentLine">
                <div>{{ item2.telCount == null ? 0 : item2.telCount }}</div>
                <span>{{ item2.time }}</span>
              </div>
              <div class="kuang_content">
                <div>
                  {{ data.returnData.telCountAll }}
                </div>
                <span>累计</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
// import echarts from 'echarts'
export default {
  data() {
    return {
      dialogChoiceImg: false, //业务场景推送预览弹框显隐
      dialogChoiceImgTow:false,
      imgUrl: "", //照片地址
      title:"",//文字描述
      data: {},
      courseImgShow: false,
      courseGroupShow: false,
      courseGuideShow: false,
      showPic: [
        { index: 0, name: "医疗样本数据" },
        { index: 1, name: "全方位数据分析" },
        { index: 2, name: "医疗样本智能计算" },
      ],
      imgsGuide: [
        {
          url: require("../../assets/courseImg/guide_one.jpg"),
          link: "/content1",
          indexImg: 1,
        },
        {
          url: require("../../assets/courseImg/guide_tow.jpg"),
          link: "/content1",
          indexImg: 2,
        },
        {
          url: require("../../assets/courseImg/guide_there.jpg"),
          link: "/content1",
          indexImg: 3,
        },
        {
          url: require("../../assets/courseImg/guide_four.jpg"),
          link: "/content1",
          indexImg: 4,
        },
        {
          url: require("../../assets/courseImg/guide_five.jpg"),
          link: "/content1",
          indexImg: 5,
        },
        {
          url: require("../../assets/courseImg/guide_sex.jpg"),
          link: "/content1",
          indexImg: 6,
        },
      ],
      imgsGroup: [
        {
          url: require("../../assets/courseImg/group_one.jpg"),
          link: "/content1",
          indexImg: 1,
        },
        {
          url: require("../../assets/courseImg/group_tow.jpg"),
          link: "/content1",
          indexImg: 2,
        },
        {
          url: require("../../assets/courseImg/group_there.jpg"),
          link: "/content1",
          indexImg: 3,
        },
        {
          url: require("../../assets/courseImg/group_four.jpg"),
          link: "/content1",
          indexImg: 4,
        },
      ],
      imgsGroupTow: [
        {
          url: require("../../assets/imtTow/zdywbts.png"),
          link: "/content1",
          indexImg: 1,
          name: "自定义文本推送",
          title:"自定文本推送：可自定义推送文本内容，可支持富文本编辑功能并支持上传图片、文件等功能。"
        },
        {
          url: require("../../assets/imtTow/xszzdk.png"),
          link: "/content1",
          indexImg: 2,
          name: "销售组织打卡",
          title:"销售组织打卡：智运灯塔每日配置相关打卡活动，嘟一下自动生成打卡信息图片及跳转打卡链接页面，打卡签到。"
        },
        {
          url: require("../../assets/imtTow/ydyj.png"),
          link: "/content1",
          indexImg: 3,
          name: "异动预警",
          title:"异动预警：每日大数据平台获取异动场景相关数据，支持插入动态变量参数，可自动向上升级推送相关通报报表"
        },
        {
          url: require("../../assets/imtTow/gzzssd.png"),
          link: "/content1",
          indexImg: 4,
          name: "规则知识送达",
          title:"规则知识送达：智运灯塔配置相关业务知识点，嘟一下推送对应知识文件及相关说明"
        },
        {
          url: require("../../assets/imtTow/5Gldst.png"),
          link: "/content1",
          indexImg: 5,
          name: "5G领导视窗",
          title:"领导视窗：智运灯塔领导视窗集成“嘟能力”，管理人员在系统上发起领导视窗，嘟一下推送可视化视窗给一线领导，快速帮助一线领导掌控全局数据，快速定位“下一步”大方向。"
        },
        {
          url: require("../../assets/imtTow/kbxts.png"),
          link: "/content1",
          indexImg: 6,
          name: "宽表小贴士",
          title:"宽表小贴士：嘟一下将快电-规范动作指标、营销动作指标快电-业务发展指标、快电-全景指标等数据制成卡片形式推送给一线人员。"
        },
        {
          url: require("../../assets/imtTow/bqxts.png"),
          link: "/content1",
          indexImg: 7,
          name: "标签小贴士",
          title:"标签小贴士：嘟一下将标签新上字段，标签口径等数据制成卡片形式推送给一线人员。"
        },
      ],
      scenePush: [
        //业务场景推送预览数据
        // {
        //   id: 1,
        //   activeName: "自定义文本推送",
        //   count: 28907,
        // },
        // {
        //   id: 2,
        //   activeName: "销售组织打卡",
        //   count: 11289,
        // },
        // {
        //   id: 3,
        //   activeName: "移动预警",
        //   count: 6397,
        // },
        // {
        //   id: 4,
        //   activeName: "规则知识送达",
        //   count: 23,
        // },
        // {
        //   id: 5,
        //   activeName: "5G领导视窗",
        //   count: 231,
        // },
        // {
        //   id: 6,
        //   activeName: "宽表小贴士",
        //   count: 0,
        // },
        // {
        //   id: 7,
        //   activeName: "标签小贴士",
        //   count: 0,
        // },
      ],
      numData: 586532,
      newStime: "", //当天的开始时间 年月日 时分秒
      newStimeNew: "", //当天的开始时间 年月日
      endTime: "", //当天的结束时间 年月日 时分秒
      dataTime: "", //当天时间的拼接
      newMonth: "", //当月的第一天 年月日 时分秒
      newMonthNew: "", //当月的第一天 年月日
      endMonth: "", //当月的最后一天天 年月日 时分秒
      monthTime: "", //当月时间的拼接
      timeMonth: "",
      outbountTime: "", //嘟一下活动响应人数时间搜索
      businessSceneTime: "", //业务场景推送预览时间搜索
      timeDefaultShow: ["2022-6-2", "2022-6-24"], //默认时间
      dayList: [],
      monthList: [],
      dataList: [
        {
          id: 1,
          title: "发送规模",
          dangri: "当日",
          dangriNum: 150,
          dangyu: "当月",
          dangyuNum: 1456,
          leiji: "累计",
          leijiNum: 12789,
        },
        {
          id: 2,
          title: "响应规模",
          dangri: "当日",
          dangriNum: 231,
          dangyu: "当月",
          dangyuNum: 1256,
          leiji: "累计",
          leijiNum: 52.5,
        },
        {
          id: 3,
          title: "短信升级规模",
          dangri: "当日",
          dangriNum: 150,
          dangyu: "当月",
          dangyuNum: 1456,
          leiji: "累计",
          leijiNum: 14523,
        },
        {
          id: 4,
          title: "电话升级规模",
          dangri: "当日",
          dangriNum: 150,
          dangyu: "当月",
          dangyuNum: 1456,
          leiji: "累计",
          leijiNum: 13.9,
        },
      ],
      planNum: null, //累计获得策划数
      byModeType: {}, //后面的四个数据
    };
  },
  watch: {
    courseGuideShow(newVal, oldVal) {
      // if (newVal === false) {
      //   this.imgsGuide = []
      //   console.log("----------",111);
      //   console.log("2222222222",this.imgsGuide);
      // }else{
      //   this.imgsGuide = this.imgsGuide
      //   console.log("ggggg");
      // }
    },
  },
  created() {
    this.getData();
    this.getDay();
    this.getDataNum();
    this.getPlanNum(); //累计获得策划数
    this.getByModeType(); //后面的四个数据
  },
  mounted() {
    this.fetchFraudLineData(); //折线图
    this.fetchFraudPieData(); //饼图
    this.fetchFraudPieDataTow(); //饼图
    this.fetchFraudBarData(); //柱状图
    this.getActiveCount();
    window.onresize = () => {
      return (() => {
        if (document.documentElement.clientHeight > 960) {
          this.screenwidth =
            (document.documentElement.clientHeight * 668) / 1620 + "px";
        }
      })();
    };
  },
  filters: {
    //num:是页面显示的数据
    //val：代码获取到的数据
    //{{data|num}}: data:相当于val，num：是页面显示的数据
    //data相当于参数传给了下面的val
    //必须要有返回值 temp（最终显示在页面上的数据）
    num: (val) => {
      // console.log("val", val);
      if (val === undefined) {
        return "数据加载中";
      }
      val = "" + val; // 转换成字符串
      let int = val;
      int = int.split("").reverse().join(""); // 翻转整数
      let temp = ""; // 临时变量
      for (let i = 0; i < int.length; i++) {
        temp += int[i];
        if ((i + 1) % 3 === 0 && i !== int.length - 1) {
          temp += ","; // 每隔三个数字拼接一个逗号
        }
      }
      temp = temp.split("").reverse().join(""); // 加完逗号之后翻转
      return temp; // 返回
    },
  },
  activated: function () {
    // this.getActiveCount()
  },
  methods: {
    getDay() {
      //当天的开始时间 年月日 时分秒
      let daySart = new Date(
        new Date(new Date().toLocaleDateString()).getTime()
      );
      // console.log(daySart);
      let newdate = new Date(daySart);
      this.newStime =
        newdate.getFullYear() +
        "-" +
        (newdate.getMonth() + 1) +
        "-" +
        newdate.getDate() +
        " " +
        newdate.getHours() +
        +"0" +
        ":" +
        newdate.getMinutes() +
        +"0" +
        ":" +
        newdate.getSeconds() +
        "0";
      this.newStimeNew =
        newdate.getFullYear() +
        "-" +
        (newdate.getMonth() + 1) +
        "-" +
        newdate.getDate() +
        "";
      // console.log("当天开始时间",this.newStime);
      // console.log("当天开始时间", this.newStimeNew);
      //当天的结束时间 年月日 时分秒
      let dayEnd = new Date(
        new Date(new Date().toLocaleDateString()).getTime() +
          24 * 60 * 60 * 1000 -
          1
      );
      let endDate = new Date(dayEnd);
      this.endTime =
        endDate.getFullYear() +
        "-" +
        (endDate.getMonth() + 1) +
        "-" +
        endDate.getDate() +
        " " +
        endDate.getHours() +
        ":" +
        endDate.getMinutes() +
        ":" +
        endDate.getSeconds();
      // console.log(dayEnd);
      // console.log("当天结束时间",this.endTime);
      this.dataTime = "当日" + "_" + this.newStime + "_" + this.endTime;
      console.log("当天时间拼接",this.dataTime);
      //当月的第一天 年月日 时分秒
      function formatDateTime(inputTime) {
        var date = new Date(inputTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        var h = date.getHours();
        h = h < 10 ? "0" + h : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? "0" + minute : minute;
        second = second < 10 ? "0" + second : second;
        return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
      }
      //当月的第一天 年月日
      function formatDateTimeNew(inputTime) {
        var date = new Date(inputTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        // var h = date.getHours();
        // h = h < 10 ? "0" + h : h;
        // var minute = date.getMinutes();
        // var second = date.getSeconds();
        // minute = minute < 10 ? "0" + minute : minute;
        // second = second < 10 ? "0" + second : second;
        return y + "-" + m + "-" + d;
      }
      var data = new Date();
      data.setDate(1);
      data.setHours(0);
      data.setSeconds(0);
      data.setMinutes(0);
      this.newMonth = formatDateTime(data.getTime());
      this.newMonthNew = formatDateTimeNew(data.getTime());
      console.log("this.newMonth==",this.newMonth);
      console.log("this.newMonthNew==", this.newMonthNew);
      //当月的最后一天 年月日 时分秒
      let mDate = new Date();
      let currentMonth = mDate.getMonth();
      let nextMonth = ++currentMonth;
      let nextMonthFirstDay = new Date(mDate.getFullYear(), nextMonth, 1);
      let oneDay = 1000 * 60 * 60 * 24;
      let lastTime = new Date(nextMonthFirstDay - oneDay);
      let month = parseInt(lastTime.getMonth() + 1);
      let day = lastTime.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      let hms = "23" + ":" + "59" + ":" + "59";
      this.endMonth = mDate.getFullYear() + "-" + month + "-" + day + " " + hms;
      // console.log("this.endMonth==",this.endMonth);
      this.monthTime = "当月" + "_" + this.newMonth + "_" + this.endMonth;
      console.log("当月时间拼接",this.monthTime);
      this.timeMonth = this.dataTime + "," + this.monthTime;
      // console.log("this.timeMonth=======",this.timeMonth);
      if (this.outbountTime === "" || this.outbountTime === null) {
        // console.log("sssssssssssssssssssssssss");
        this.outbountTime = [this.newMonthNew, this.newStimeNew];
        this.businessSceneTime = [this.newMonthNew, this.newStimeNew];
        console.log("------------------", this.outbountTime);
      }
    },
    getData() {
      this.$http({
        url: this.$http.adornUrl("/cpcplog/getCount"),
        method: "post",
        data: {},
      }).then((res) => {
        if (res.data.code === 0) {
          this.data = res.data;
        }
      });
    },
    //累计获得策划数
    getPlanNum() {
      this.$http({
        url: this.$http.adornUrl("/cpcpdu/getCount"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // console.log("data",data);
          this.planNum = data.data;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //后面的四个数据
    getByModeType() {
      this.$http({
        url: this.$http.adornUrl("/cpcplog/getCountGroupByModeType"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // console.log("data",data);
          // this.planNum = data.data
          this.byModeType = data.data;
          // console.log("byModeTypebyModeTypebyModeType=", this.byModeType);
          // console.log("byModeTypebyModeTypebyModeType=", this.byModeType);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //获取首页中间数据
    getDataNum() {
      // console.log("this.timeMonth---------",this.timeMonth);
      this.$http({
        url: this.$http.adornUrl("/cpcplog/getLogTable1"),
        method: "post",
        params: this.$http.adornParams({
          times: this.timeMonth,
        }),
      }).then((res) => {
        if (res.data.code === 0) {
          // console.log("===getDataNum===");
          // console.log(res);
          this.dayList = res.data.returnData.list[0];
          this.monthList = res.data.returnData.list[1];
          this.data = res.data;
          // console.log(this.dayList);
          // console.log(this.monthList);
        }
      });
    },
    getWidth(val) {
      // console.log("val====", val);
      // console.log("val====", typeof val);
      let max = (this.scenePush[0].count);
      // console.log("----",max);
      let width = 0
      width = Math.ceil((200 / 100) * ((val / max) * 100));
      if(isNaN(width)){
        width = 0
      }
      // console.log("------",width);
      return width   + "px"
    },
    //图片预览-弹框
    choiceImg(imgNum) {
      console.log("lmgnum=====", imgNum);
      this.imgsGroupTow.forEach((element) => {
        // if (element.indexImg == imgNum) {
        if (element.name === imgNum) {
          this.dialogChoiceImg = true;
          this.imgUrl = element.url;
          this.title = element.title
        }
      });
    },

    //折线图
    fetchFraudLineData() {
      this.$http({
        url: this.$http.adornUrl("/cpcplog/getIsRedCountByDate"),
        method: "get",
        params: this.$http.adornParams({
          startTime: this.outbountTime[0] + " 00:00:00",
          endTime: this.outbountTime[1] + " 23:59:59",
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // console.log("-------------".data);
          this.initFraudLine(data.data);
        } else {
          this.$message.error(data.msg);
        }
      });
      // this.initFraudLine();
    },
    initFraudLine(data) {
      //获取到上面的标签<div id="fraud"></div>
      let fraud = echarts.init(document.getElementById("fraud_line"));
      // let times = [];
      // data.forEach((element) => {
      //   arr.push({
      //     value: element.count, //将数组的conut值赋给value
      //     name: element.activityName, //将数组的name值赋给name
      //   });
      // });
      let time = data.map((d) => d.time);
      let pushCount = data.map((d) => d.pushCount);
      let option = {
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        title: {
          left: "22",
          top: "15",
          text: "嘟一下活动响应人数统计分析",
          textStyle: {
            color: "#fff",
            left: "20%",
          },
        },

        textStyle: {
          color: "#fff",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "rgb(4,134,159)",
            },
          },
        },
        // legend: {
        //   data: ["Line 1"],
        // },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: time,
          },
        ],
        yAxis: [
          {
            type: "value",
            // scale: true,
          },
        ],
        series: [
          {
            // name: "Line 1",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgb(1, 191, 236)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: pushCount,
          },
        ],
      };
      // chart.setOption(option, notMerge, lazyUpdate);
      //notMerge:可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
      fraud.setOption(option); //当修改setOption值的时候，需要echarts重绘，第二个人参数是
      window.addEventListener("resize", () => {
        fraud.resize();
      });
    },
    //业务场景推送预览-数据
    getActiveCount() {
      this.$http({
        url: this.$http.adornUrl("/cpcplog/getActiveCount"),
        method: "get",
        params: this.$http.adornParams({
          startTime: this.businessSceneTime[0] + " 00:00:00",
          endTime: this.businessSceneTime[1] + " 23:59:59",
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("-------------", data);
          this.scenePush = data.data
          // this.initFraudSceneBar(data.data);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //横向柱状图fraudScene_bar
    initFraudSceneBar(data) {
      let fraudSceneBar = echarts.init(
        document.getElementById("fraudScene_bar")
      );
      fraudSceneBar.on("click",  (params)=> {
        console.log(params);
        console.log(params.name);
        let this_ = this
        // this_.dialogChoiceImg = true;
        
        this_.choiceImg(params.name)
        // for (let index = 0; index < this.imgsGroupTow.length; index++) {
        //   console.log("wwwwwwwwwwwwwwwwwww");
        //   // const element = array[index];
          
        // }
      //   this.imgsGroupTow.forEach((element) => {
      //   // if (element.indexImg == imgNum) {
      //   if (element.name === imgNum) {
      //     this.dialogChoiceImg = true;
      //     this.imgUrl = element.url;
      //   }
      // });
        
      });
      // let arr = [];
      // data.forEach((element) => {
      //   arr.push({
      //     value: element.count, //将数组的conut值赋给value
      //     name: element.activeName, //将数组的name值赋给name
      //   });
      // });
      let activeName = data.map((d) => d.activeName);
      let count = data.map((d) => d.count);
      // console.log("--------------",arr);
      let option = {
        grid: {
          left: "15",
          containLabel: true,
        },
        xAxis: [
          //x轴数据设置
          {
            type: "value",
            name: "数量",
            min: 0,
            // max: 150,
            // interval: 100, //间隔数
            // splitNumber: 5,
            axisLabel: {
              // formatter: "{value} ",
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              //这是y轴文字颜色
              lineStyle: {
                color: "#65C6E7",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            offset: 0,
            axisLine: {
              //这是x轴文字颜色
              lineStyle: {
                color: "#65C6E7",
              },
            },
            data: activeName,
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: true,
            },
          },
        ],
        series: [
          {
            data: [10, 0, 0, 0, 5234, 9890, 12220],
            type: "bar",
            barWidth: 22,
            label: {
              normal: {
                show: true,
                position: "right",
                textStyle: {
                  //数值样式
                  color: "#fff",
                  fontSize: 14,
                },
              },
            },
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function (params) {
                  var colorList = [
                    "#855BD7",
                    "#4B6FB8",
                    "#0F6E43",
                    "#B69C2B",
                    "#2588BB",
                    "#BB612D",
                    "#1D9394",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      };
      fraudSceneBar.setOption(option); //当修改setOption值的时候，需要echarts重绘，第二个人参数是
      window.addEventListener("resize", () => {
        fraudSceneBar.resize();
      });
    },
    //饼图(第一个)
    fetchFraudPieData() {
      this.$http({
        // url: this.$http.adornUrl("/cpcpdu/getCountGroupBy"),
        url: this.$http.adornUrl("/cpcpdu/getCountByApiKey"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // console.log("data", data);
          this.initFraudPie(data.data);
          // this.initFraudOne()
        } else {
          this.$message.error(data.msg);
        }
      });
      // this.initFraudPie();
    },
    initFraudOne() {
      let fraudOne = echarts.init(document.getElementById("fraud_one"));
      console.log("123=====", fraudOne);
      let option = {
        title: {
          left: "22",
          top: "15",
          text: "123",
          textStyle: {
            color: "#fff",
            left: "20%",
          },
        },
      };
      fraudOne.setOption(option); //当修改setOption值的时候，需要echarts重绘，第二个人参数是
      window.addEventListener("resize", () => {
        fraudOne.resize();
      });
    },
    initFraudPie(data) {
      //获取到上面的标签<div id="fraud"></div>
      let fraud = echarts.init(document.getElementById("fraud_pie"));
      let arr = [];
      data.forEach((element) => {
        arr.push({
          value: element.count, //将数组的conut值赋给value
          name: element.tripartite, //将数组的name值赋给name
        });
      });
      let option = {
        title: {
          left: "22",
          top: "15",
          text: "三方调用分布总览",
          textStyle: {
            color: "#fff",
            left: "20%",
          },
        },
        tooltip: {
          trigger: "item",
        },

        legend: {
          type: "scroll",
          top: "center",
          orient: "vertical",
          right: "5%",
          textStyle: {
            // fontSize: 18, //字体大小
            color: "#fff", //字体颜色
          },
        },
        textStyle: {
          color: "#fff",
        },
        series: [
          {
            // name: "Access From",
            type: "pie",
            minAngle: 30, // 最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            radius: ["20%", "30%"],
            center: ["30%", "50%"],
            // avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              normal: {
                formatter: "{d}%",
                textStyle: {
                  fontWeight: "normal",
                  fontSize: 15,
                  color: "#fff", //字体颜色
                },
                overflow: "none",
              },
            },
            labelLine: {
              normal: {
                // length: 10, // 修改引导线第一段的长度
                // length2: 5, // 修改引导线第二段的长度
                // lineStyle: {
                //   color: "red", // 修改引导线的颜色
                // },
              },
            },
            emphasis: {
              // label: {
              //   show: true,
              //   fontSize: "20",
              //   fontWeight: "bold",
              // },
            },
            // labelLine: {
            //   show: false,
            // },
            data: arr,
            // minAngle: 0.01,
          },
        ],
      };
      // chart.setOption(option, notMerge, lazyUpdate);
      //notMerge:可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
      fraud.setOption(option); //当修改setOption值的时候，需要echarts重绘，第二个人参数是
      window.addEventListener("resize", () => {
        fraud.resize();
      });
    },
    //饼图(第二个)
    fetchFraudPieDataTow() {
      this.$http({
        url: this.$http.adornUrl("/cpcpdu/getCountGroupByApi"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // console.log("data-------", data);
          this.initFraudPieTow(data.data);
        } else {
          this.$message.error(data.msg);
        }
      });
      // this.initFraudPie();
    },
    initFraudPieTow(data) {
      //获取到上面的标签<div id="fraud"></div>
      let fraud = echarts.init(document.getElementById("fraud_pieTow"));
      let arr = [];
      data.forEach((element) => {
        arr.push({
          value: element.count, //将数组的conut值赋给value
          name: element.activityName, //将数组的name值赋给name
        });
      });
      let option = {
        title: {
          left: "22",
          top: "15",
          text: "业务场景分布总览",
          textStyle: {
            color: "#fff",
            left: "20%",
          },
        },
        tooltip: {
          trigger: "item",
        },

        legend: {
          type: "scroll",
          top: "center",
          orient: "vertical",
          right: "5%",
          textStyle: {
            // fontSize: 18, //字体大小
            color: "#fff", //字体颜色
          },
        },
        textStyle: {
          color: "#fff",
        },
        series: [
          {
            // name: "Access From",
            type: "pie",
            minAngle: 15, // 最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            radius: ["20%", "30%"],
            center: ["30%", "50%"],
            // avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              normal: {
                formatter: "{d}%",
                textStyle: {
                  fontWeight: "normal",
                  fontSize: 15,
                  color: "#fff", //字体颜色
                },
                overflow: "none",
              },
            },
            labelLine: {
              normal: {
                // length: 10, // 修改引导线第一段的长度
                // length2: 5, // 修改引导线第二段的长度
                // lineStyle: {
                //   color: "red", // 修改引导线的颜色
                // },
              },
            },
            emphasis: {
              // label: {
              //   show: true,
              //   fontSize: "20",
              //   fontWeight: "bold",
              // },
            },
            // labelLine: {
            //   show: false,
            // },
            data: arr,
            // minAngle: 0.01,
          },
        ],
      };
      // chart.setOption(option, notMerge, lazyUpdate);
      //notMerge:可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
      fraud.setOption(option); //当修改setOption值的时候，需要echarts重绘，第二个人参数是
      window.addEventListener("resize", () => {
        fraud.resize();
      });
    },
    //嘟一下活动响应人数-时间事件
    chioceTime() {
      console.log(this.outbountTime);
      this.getDay();
      this.fetchFraudLineData();
      // localStorage.setItem(
      //   "outbountTime",
      //   JSON.parse(JSON.stringify(this.outbountTime))
      // );
      // console.log(
      //   "localStoragelocalStoragelocalStorage",
      //   localStorage.getItem("outbountTime")
      // );
    },
    //业务场景推送预览-时间事件
    chioceSceneTime() {
      console.log("-----", this.businessSceneTime);
      this.getActiveCount();
    },
    getIWorkState(a){
      console.log("vvvvvvvvvvvvvvvvvvvvvv",a);
    },
    handleImg(imgUrl){
      this.dialogChoiceImgTow = true
      this.imgUrl = imgUrl
      console.log("ssssssssssssss",imgUrl);
    },
    // timeDefaultShow(){
    //   console.log("dasdfsdfsdf");
    // },
    //柱状图
    fetchFraudBarData() {
      this.$http({
        url: this.$http.adornUrl("/cpcplog/getCountBYCityCode"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.initFraudBar(data.data);
        } else {
          this.$message.error(data.msg);
        }
      });
      // this.initFraudBar();
    },
    initFraudBar(data) {
      let cityName = data.map((d) => d.cityName);
      let pushSumCount = data.map((d) => d.pushSumCount);
      //获取到上面的标签<div id="fraud"></div>
      let fraud = echarts.init(document.getElementById("fraud_bar"));
      let option = {
        title: {
          left: "22",
          top: "15",
          text: "嘟一下分公司推送人数统计分析",
          textStyle: {
            color: "#fff",
            left: "20%",
          },
        },
        tooltip: {
          trigger: "item",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          itemWidth: 10,
          containLabel: true,
        },
        legend: {
          // top: "center",
          color: ["#3398DB"], //此处可设置柱条全局颜色
          orient: "vertical",
          left: "80%",
          width: "auto", //图例宽度
          bottom: "80%",
          height: "auto",
          itemWidth: 10,
          textStyle: {
            fontSize: 18, //字体大小
            color: "#fff", //字体颜色
          },
        },
        textStyle: {
          color: "#fff",
        },
        xAxis: {
          type: "category",
          data: cityName,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            barWidth: "30%",
            data: pushSumCount,
            type: "bar",
            itemStyle: {
              normal: {
                // color: "#FF774B",
                barBorderRadius: [10, 10, 0, 0], //依次表示 左上，右上，右下、左下
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  color: "#FF774B",
                  textStyle: {
                    //数值样式
                    color: "#aaa",
                    fontSize: 14,
                  },
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(76,217,227,0.8)" },
                  // {offset: 0.5, color: '#188df0'},
                  { offset: 1, color: "rgb(14,59,100)" },
                ]),
              },
            },
          },
        ],
      };
      // chart.setOption(option, notMerge, lazyUpdate);
      //notMerge:可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
      fraud.setOption(option); //当修改setOption值的时候，需要echarts重绘，第二个人参数是
      window.addEventListener("resize", () => {
        fraud.resize();
      });
    },
    chioceCarousel(item) {
      console.log("111111111111111111111111", item);
    },
    linkTo() {
      console.log("=========", this.$refs.carouselGuide);
      let activeIndex = this.$refs.carouselGuide.activeIndex;
      console.log("activeIndex==", activeIndex);
      console.log("00000000000", this.imgsGuide[activeIndex].indexImg);
      if (this.imgsGuide[activeIndex].indexImg !== 6) {
        let num = activeIndex + 1;
        this.$refs.carouselGuide.setActiveItem(num);
      } else {
        this.courseGuideShow = false;
      }
      // this.$router.push(this.imgsGuide[activeIndex].link)
      // this.$router.push(this.imgs[activeIndex].link)
    },
    linkToGroup() {
      console.log("=========", this.$refs.carouselGroup);
      let activeIndex = this.$refs.carouselGroup.activeIndex;
      console.log("activeIndex==", activeIndex);
      console.log("00000000000", this.imgsGroup[activeIndex].indexImg);
      if (activeIndex !== 3) {
        let num = activeIndex + 1;
        this.$refs.carouselGroup.setActiveItem(num);
      } else {
        this.courseGroupShow = false;
      }
    },
    //点击教程指导
    handleButton() {
      this.courseImgShow = true;
    },
    choiceOne() {
      var self = this;
      self.courseImgShow = false;
      //推送引导显示
      self.courseGuideShow = true;
      //群组配置隐藏
      self.courseGroupShow = false;
      if (!self.$refs.carouselGuide) {
        console.log("哈哈哈");
        // console.log("----------",self.$refs.carouselGuide.setActiveItem);
        setTimeout(function () {
          //等组件生成再调用setActiveItem(index);
          self.$refs.carouselGuide.setActiveItem("0");
        }, 500);
      } else {
        console.log("我试试");
        self.$refs.carouselGuide.setActiveItem("0");
      }
    },
    choiceTow() {
      var selfTow = this;
      selfTow.courseImgShow = false;
      //群组配置显示
      selfTow.courseGroupShow = true;
      //推送引导隐藏
      selfTow.courseGuideShow = false;
      if (!selfTow.$refs.carouselGroup) {
        console.log("哈哈哈");
        // console.log("----------",self.$refs.carouselGuide.setActiveItem);
        setTimeout(function () {
          //等组件生成再调用setActiveItem(index);
          selfTow.$refs.carouselGroup.setActiveItem("0");
        }, 500);
      } else {
        console.log("我试试");
        selfTow.$refs.carouselGroup.setActiveItem("0");
      }
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-around;
}
.header > div {
  width: 20%;
  height: 120px;
  background: #f2f2f2;
  box-sizing: border-box;
  padding: 12px 20px;
}
.head_logo {
  display: inline-block;
  width: 60px;
  height: 60px;
}
.img_con {
  margin-top: 20px;
}
.img_con span {
  font-size: 24px;
  font-weight: bold;
}

.site-content {
  position: relative;
  padding: 0px 0px;
}
.box {
  position: relative;
  /* width: 100%;
  height: 100%;
  background-image: url("../../assets/img/new_bg.png");
  background-repeat: no-repeat;
  background-position: 0 0; */
}
.box .box_content {
  position: absolute;
  width: 80%;
  top: 35%;
  left: 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.box .box_contentTow {
  position: absolute;
  margin-top: 165px;
  width: 80%;
  top: 35%;
  left: 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* @media screen and (min-width: 800px) {
  .box .box_content {
    position: absolute;
    width: 60%;
    top: 35%;
    left: 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
} */
/* @media screen and (max-width: 1050px) {
  .box .box_content {
    position: absolute;
    width: 58%;
    top: 35%;
    left: 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
} */
.box_content .box_kuang {
  width: 330px;
  height: 140px;
  background-size: contain;
  background-image: url("../../assets/img/bg_kuang.png");
  background-repeat: no-repeat;
  margin: 10px;
}
.box_content img {
  width: 300px;
}
.kuang_title {
  margin: 30px 0 0 30px;
  font-size: 18px;
}
.kuang_content {
  width: 85px;
  line-height: 30px;
  display: inline-block;
  position: relative;
  padding: 10px;
}
.kuang_data {
  margin-left: 20px;
}
/* .box_content i{
  color: red;
  height: 100%;
} */
.kuang_contentLine::after {
  position: absolute;
  top: 20px;
  content: "";
  width: 3px;
  height: 50px;
  border-right: 1px solid rgb(68, 130, 198);
  display: inline-block;
  margin-left: 32px;
  margin-bottom: 10px;
}

/* .box_content i{
  display: inline-block;
  width: 3px;
  height: 50px;
  color: red;
} */
.header_shuju {
  position: relative;
  padding-left: 13px;
  margin: 0 0 10px 20px;
  color: white;
}
.header_shuju div:first-child {
  /* color: red; */
  font-size: 20px;
}
.header_shuju div:nth-child(2) {
  /* color: yellow; */
  font-style: 12px;
  margin-top: 5px;
}
.header_shuju div:nth-child(3) {
  /* color: yellow; */
  font-style: 12px;
  float: right;
  margin-right: 1.25rem;
  margin-top: -2.125rem;
}
.header_shuju:before {
  content: "";
  background-color: #3796ec;
  width: 4px;
  height: 47px;
  position: absolute;
  left: 0;
  top: 15%;
  margin-top: -8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.umulativefield {
  margin-top: 30px;
  margin-left: 20px;
  padding-left: 20px;
  width: 100%;
  height: 174px;
  display: flex;
  justify-content: space-between;
  background-image: url("~@/assets/img/group_one.png");
  background-repeat: no-repeat;
  background-size: 98% 75%;
}
.umulativefield img {
  margin-left: 16px;
  width: 40px;
  height: 40px;
  margin-top: 10px;
}
.umulativefield .umulativefield_box {
  width: 20%;
  padding-top: 34px;
}
.umulativefield_num {
  display: flex;
  justify-content: flex-start;
}
.umulativefield_num div:first-child {
  line-height: 30px;
}
.umulativefield_num div:first-child span {
  color: rgb(2, 250, 254);
}
.umulativefield_num span:first-of-type {
  font-size: 20px;
}
.umulativefield_num span:last-of-type {
  margin-left: 5px;
}
.content_echarts {
  margin-left: 21px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.content_echarts .content_search {
  width: 65%;
  position: relative;
  /* min-height: 344px; */
  /* border: 1px solid red; */
  /* background-image: url("~@/assets/img/group_tow.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; */
}
.content_search .seach_time {
  position: absolute;
  top: 5px;
  right: 20px;
}
.content_echarts #fraud_line {
  width: 100%;
  min-height: 344px;
  /* border: 1px solid red; */
  background-image: url("~@/assets/img/group_tow.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* padding: 20px; */
}
.content_echarts #fraud_pieBox {
  width: 32%;
  min-height: 344px;
  margin-left: 20px;
  /* border: 1px solid yellow; */
  /* min-height: 344px;
  margin-left: 20px;
  background-image: url("~@/assets/img/group_there.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; */
}
.content_echarts #fraud_pie {
  width: 100%;
  /* border: 1px solid yellow; */
  min-height: 344px;
  /* margin-left: 20px; */
  background-image: url("~@/assets/img/group_there.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.content_echarts #fraud_one {
  width: 100%;
  /* border: 1px solid yellow; */
  min-height: 344px;
  /* margin-left: 20px; */
  background-image: url("~@/assets/img/group_there.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.content_echarts #fraud_one .seach_timeTow {
  position: absolute;
  top: 5px;
  right: 20px;
}
.content_echarts #fraud_one .title {
  /* margin: 10px 0 0 20px; */
  padding-top: 1px;
  padding-left: 30px;
  font-size: 15px;
  color: #fff;
}
.content_echarts #fraud_one .choice_btn {
  margin-top: 20px;
  padding-top: 5px;
  padding-left: 30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.choice_btn div {
  width: 33%;
  margin-top: 20px;
}
.choice_btn div .buttonClass {
  width: 8.4375rem;
}
.el-button--button_one {
  background-color: rgb(238, 102, 102) !important;
  border-color: rgb(238, 102, 102) !important;
  color: #fff;
}
.el-button--button_tow {
  background-color: rgb(145, 204, 117) !important;
  border-color: rgb(145, 204, 117) !important;
  color: #fff;
}
.el-button--button_there {
  background-color: rgb(250, 200, 88) !important;
  border-color: rgb(250, 200, 88) !important;
  color: #fff;
}
.el-button--button_four {
  background-color: rgb(237, 102, 102) !important;
  border-color: rgb(237, 102, 102) !important;
  color: #fff;
}
.el-button--button_five {
  background-color: rgb(59, 161, 113) !important;
  border-color: rgb(59, 161, 113) !important;
  color: #fff;
}
.el-button--button_six {
  background-color: rgb(154, 96, 180) !important;
  border-color: rgb(154, 96, 180) !important;
  color: #fff;
}
.el-button--button_seven {
  background-color: rgb(234, 124, 204) !important;
  border-color: rgb(234, 124, 204) !important;
  color: #fff;
}
.el-button--default {
  background: rgb(238, 102, 102) !important;
  border-color: rgb(238, 102, 102) !important;
  color: #fff;
}
.content_echarts #fraudScene_bar {
  width: 100%;
  /* border: 1px solid yellow; */
  min-height: 344px;
  /* margin-left: 20px; */
  /* background-image: url("~@/assets/img/group_there.png"); */
  /* background-repeat: no-repeat; */
  /* /* background-size: 100% 100%; */
}
.content_echarts #fraud_pieTow {
  width: 100%;
  /* border: 1px solid yellow; */
  min-height: 344px;
  /* margin-left: 20px; */
  background-image: url("~@/assets/img/group_there.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.buttom_echarts {
  width: 100%;
  margin-left: 21px;
  margin-top: 20px;
  min-height: 290px;
  /* border: 1px solid yellow; */
  background-image: url("~@/assets/img/group_four.png");
  background-repeat: no-repeat;
  background-size: 98.3% 100%;
}
.content_echarts /deep/ .el-dialog__body{
  padding: 5px 20px 30px 20px;
}
.content_echarts /deep/ .el-dialog__header{
  padding: 35px 20px 10px;
}
.seach_time /deep/ .el-date-editor .el-range-input,
.seach_timeTow /deep/ .el-date-editor .el-range-input {
  background-color: transparent !important;
  color: white;
}
.seach_timeTow /deep/ .el-range-editor--medium.el-input__inner {
  width: 18.75rem;
}

.courseImg {
  width: 100%;
  height: 100vh;
  background: #000 url("~@/assets/courseImg/choice.jpg") no-repeat;
  background-size: cover;
}
.couseDiv {
  position: relative;
  height: 100vh;
}
.couseDiv div:first-child {
  width: 30.5rem;
  height: 15.5rem;
  /* background: red; */
  position: absolute;
  top: 25%;
  left: 20%;
}
.couseDiv div:last-child {
  width: 30.5rem;
  height: 15.5rem;
  /* background: red; */
  position: absolute;
  top: 50%;
  left: 55%;
}
/* .bgImg {
} */
.bgImg >>> .el-dialog__wrapper {
  /* height: 100vh; */
  z-index: 10000000 !important;
  overflow: hidden;
}
.bgImg >>> .el-dialog__header {
  padding-top: 1px;
}
.guide_img >>> .el-dialog__wrapper {
  z-index: 10000000 !important;
  overflow: hidden;
}
.img_items {
  width: 120rem;
  height: 100%;
}
/*  */
.left {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  box-sizing: border-box;
  overflow-y: auto;
  /* box-shadow: 2px 2px 14px 2px #dedede; */
  margin-right: 20px;
  padding-top: 20px;
  /* margin-top: -50px; */
}
.act-head {
  display: flex;
  justify-content: space-between;
  line-height: 40px;
  padding-right: 20px;
  font-size: 22px;
  font-weight: 700;
}
.all_img {
  margin-right: 10px;
}
.allAct {
  font-weight: 400 !important;
  font-size: 20px !important;
}
.act_chart {
  overflow-y: auto;
  padding: 0 20px;
}
.act_chart_one {
  /* height: 670px; */
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.chart_con {
  display: flex;
  width: 90%;
  margin-bottom: 26px;
  position: relative;
  justify-content: flex-start;
  cursor: pointer;
}

.act_name_sort {
  width: 120px;
  /* color: rgb(55, 137, 255); */
  text-align: right;
  overflow: hidden;
  height: 16px;
}
.act_val {
  line-height: 14px;
  height: 14px;
  border-radius: 20px;
  font-size: 16px;
  color: #ffffff;
  box-sizing: border-box;
  /* padding: 0 20px; */
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  position: relative;
  margin-left: 20px;
}
.act_width {
  /* background: linear-gradient(to right, #2f96ff, #5c53ff, #615bff, #6d3dfe); */
  /* width: 300px; */
}
/* .del-color{
  background-color: transparent !important;
} */
.chart_con:nth-child(1) .act_name_sort {
  color: rgb(62, 142, 247);
}
.chart_con:nth-child(2) .act_name_sort {
  color: rgb(145, 204, 117);
}
.chart_con:nth-child(3) .act_name_sort {
  color: rgb(250, 200, 88);
}
.chart_con:nth-child(4) .act_name_sort {
  color: rgb(237, 102, 102);
}
.chart_con:nth-child(5) .act_name_sort {
  color: rgb(59, 161, 113);
}
.chart_con:nth-child(6) .act_name_sort {
  color: rgb(154, 96, 180);
}
.chart_con:nth-child(7) .act_name_sort {
  color: rgb(234, 124, 204);
}

.chart_con:nth-child(1) .act_width {
  /* background: linear-gradient(to right, #2f96ff, #5c53ff, #a722d3, #e4117e); */
  /* background-color: rgb(238, 102, 102) !important;
  border-color: rgb(238, 102, 102) !important;
  color: #fff; */
  background-color: rgb(62, 142, 247);
}
.chart_con:nth-child(2) .act_width {
  /* background: linear-gradient(to right, #2f96ff, #5c53ff, #a722d3, #e4117e); */
  background-color: rgb(145, 204, 117);
}
.chart_con:nth-child(3) .act_width {
  /* background: linear-gradient(to right, #2f96ff, #5c53ff, #a722d3, #e4117e); */
  background-color: rgb(250, 200, 88);
}
.chart_con:nth-child(4) .act_width {
  /* background: linear-gradient(to right, #2f96ff, #5c53ff, #a722d3, #e4117e); */
  background-color: rgb(237, 102, 102);
}
.chart_con:nth-child(5) .act_width {
  /* background: linear-gradient(to right, #2f96ff, #5c53ff, #a722d3, #e4117e); */
  background-color: rgb(59, 161, 113);
}
.chart_con:nth-child(6) .act_width {
  /* background: linear-gradient(to right, #2f96ff, #5c53ff, #a722d3, #e4117e); */
  background-color: rgb(154, 96, 180) !important;
}
.chart_con:nth-child(7) .act_width {
  /* background: linear-gradient(to right, #2f96ff, #5c53ff, #a722d3, #e4117e); */
  background-color: rgb(234, 124, 204);
}
.act_num {
  position: absolute;
  /* top: -14px; */
  right: -43px;
  color: #f5f7fa;
  font-weight: 700;
}
.button {
  color: #868686;
  position: absolute;
  right: -70px;
  top: 0;
  width: 71px;
  text-align: center;
  height: 36px;
}
.button:hover {
  cursor: pointer;
  color: #97c8fa;
}
/* // 滚动条 */
    .left::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .left::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: transparent;
    }
    .left::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: transparent;
    }

</style>
